/**
 * NK卡
 */
<template>
  <div>
    <div v-if="isCard">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>销卡列表</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="boxBlock">
        <div class="serachTop">
          <!-- 搜索筛选 -->
          <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item>
              <el-input
                size="small"
                v-model="formInline.cardNo"
                placeholder="输入卡号后四位"
                type="number"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item >
              <el-input
                size="small"
                v-model="formInline.userId"
                placeholder="请输入使用者ID"
                type="number"
                v-if='hasPermission'
                clearable
              ></el-input>
            </el-form-item> 
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="search"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      

      <!--列表-->
      <div class="ra_box">
        <el-table
          size="small"
          :data="listData"
          highlight-current-row
          v-loading="loading"
          element-loading-text="拼命加载中"
          style="width: 100%"
          v-if="listData"
        >

        <el-table-column
             prop="parentUserId"
            label="所有者ID"
            show-overflow-tooltip
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="userId"
            label="使用者ID"
            show-overflow-tooltip
            width="160"
          >
         </el-table-column>

          <el-table-column prop="maskCardNo" label="卡号" show-overflow-tooltip width="200">
          </el-table-column>
          <el-table-column
            prop="cardBin"
            label="卡Bin"
            show-overflow-tooltip
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="cardCurrency"
            label="卡币种"
            show-overflow-tooltip
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="cardScheme"
            label="卡组织"
            show-overflow-tooltip
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="cardBalance"
            label="卡片余额"
            width="160"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div>{{ b(scope.row.cardBalance) }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="cardStatus"
            label="卡状态"
            show-overflow-tooltip
            width="160"
          >
            <template slot-scope="scope">
              <div>{{ cardTypeData[scope.row.cardStatus] }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="createdAt"
            label="创建时间"
            show-overflow-tooltip
            width="220"
          >
            <template slot-scope="scope">
              <div>{{ timestampToTime(scope.row.createdAt, 8 * 60 * 60) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" plain @click="changCard('', scope.row)" :key="scope.$index" >
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </div>
    </div>
    <div v-else>
      <cardItem
        @changCard="changCard"
        :isCard="isCard"
        :fatherName="fatherName"
        :cardInfo="cardInfo"
      ></cardItem>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  timestampToTime,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  req,
  service,
  encrypt,
  decrypt,
  reqtoken,
  reqField,
  format,
  getUrl,
} from "../../api/axiosFun";
import Pagination from "../../components/Pagination";
import cardItem from "./cardItem.vue";
export default {
  data() {
    return {
      fatherName: "销卡列表",
      isCard: true,
      loading: false,
      cardInfo: "",
      b: format,
      timestampToTime: timestampToTime,
      cardTypeData: {
        normal: "可用",
        pending_recharge: "待转入",
        unactivated: "未激活",
        freezing: "冻结中",
        frozen: "冻结",
        risk_frozen: "风控冻结",
        system_frozen: "系统冻结",
        unfreezing: "解冻中",
        expired: "过期",
        canceling: "销卡中",
        cancelled: "销卡",
      },
      formInline: {
        pageNum: 1,
        pageSize: 10,
        cardNo: "",
        cardStatus: "cancelled",
      },
      listData: "",
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      userInfo:{},

      hasPermission0:false,
      hasPermission:false

    };
  },
  // 注册组件
  components: {
    Pagination,
    cardItem,
  },
  created() {
    this.getdata(this.formInline);  
    if(this.$store.state.user){
      this.userInfo = JSON.parse(this.$store.state.user);
      this.hasPermission = this.$hasPermission(this.userInfo,['common'])
      this.hasPermission0 = this.$hasPermission(this.userInfo,['common','user0','user8']) 
    } 

  },
  computed: {
    ...mapGetters(["getUser"]), 
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal);
      this.hasPermission = this.$hasPermission(this.userInfo,['common'])
      this.hasPermission0 = this.$hasPermission(this.userInfo,['common','user0','user8']) 

    },
  },
  methods: {
    getdata(parameter) {
      let url = getUrl(parameter);
      service
        .get("/api/photon/cardList" + url, {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.listData = res.rows;
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    changCard(k, info) {
      this.cardInfo = info;
      this.isCard = k.myCard;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>